﻿<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
<!--    <link rel="icon" href="img/favicon.ico">-->

    <link rel="canonical" href="https://v4.bootcss.com/docs/examples/carousel/">

    <script src="/static/js/jquery-3.6.0.js"></script>
    <!-- Bootstrap core CSS -->
    <link href="/static/bootstrap-4.6.1-dist/css/bootstrap.min.css" rel="stylesheet">

    <meta name="msapplication-config" content="/docs/4.6/assets/img/favicons/browserconfig.xml">
    <meta name="theme-color" content="#563d7c">

    <link href="/static/css/index.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="/static/css/carousel.css" rel="stylesheet">

    <title>WALLPAPER&nbsp;&nbsp;SPACE</title>

    <!-- Bootstrap core CSS -->
    <link href="/static/css/vendor/bootstrap.min.css" rel="stylesheet">

    <link href="/static/css/vendor/simple-line-icons.css" rel="stylesheet">
    <link href="/static/css/vendor/themify-icons.css" rel="stylesheet">
    <link href="/static/css/vendor/owl.carousel.css" rel="stylesheet">
    <link href="/static/css/vendor/animate.css" rel="stylesheet">
    <link href="/static/css/vendor/viewbox.css" rel="stylesheet">
    <link href="/static/css/vendor/bootstrap-slider.min.css" rel="stylesheet">
    <link href="/static/css/vendor/bootstrap-datetimepicker.min.css" rel="stylesheet">

    <script src="/static/js/vendor/fontawesome-all.min.js"></script>
    <link href="/static/css/scss/main.css" rel="stylesheet">
  </head>

  <body>
  <header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="#">WALLPAPER&nbsp;&nbsp;SPACE</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" ><span class="sr-only">(current)</span></a>
          </li>
        </ul>
        <form class="form-inline mt-2 mt-md-0" action="/wallpaper/wallpaperpagevague">
          <input class="form-control mr-sm-2" name="condition" type="text" id="serach_text" placeholder="输入关键词..." aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" id="search" type="submit">搜索</button>
        </form>
        <div class="btn btn-outline-success my-2 my-sm-0"
             style="margin-left: 20px;" id="sign-in">登录/注册
        </div>
        <div class="grzx" style="display: none">
          <button class="btn btn-outline-success my-2 my-sm-0" id="upload">上传壁纸</button>
          <button class="btn btn-outline-success my-2 my-sm-0 signout">登出</button>
        </div>
        <div class="adminzx" style="display: none">
          <button class="btn btn-outline-success my-2 my-sm-0" id="admin">后台管理</button>
          <button class="btn btn-outline-success my-2 my-sm-0 signout">登出</button>
        </div>
      </div>
    </nav>
  </header>
  <main role="main">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://wkptc.oss-cn-guangzhou.aliyuncs.com/img/lbt1.jpg" width="100%" alt="lost image?" />
        </div>
        <div class="carousel-item">
          <img src="https://wkptc.oss-cn-guangzhou.aliyuncs.com/img/lbt2.png" width="100%" alt="lost image?" />
        </div>
        <div class="carousel-item">
          <img src="https://wkptc.oss-cn-guangzhou.aliyuncs.com/img/lbt4.jpg" width="100%" alt="lost image?" />
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-target="#myCarousel" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-target="#myCarousel" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </button>
    </div>
  </main>


  <!--图片区-->
    <div class="content mt-60 mb-40 container">
      <div class="row">
        <div class="col-md-6 col-lg-4" th:each="wall:*{wallpaperpage.getList()}">
            <div class="category-item effect-1">
              <img th:src="*{wall.wallpaperUrl}" alt="图没了" >
              <div class="caption">
                <div>
                  <p class="title" th:text="*{wall.wallpaperName}">名字</p>
                  <p class="description">这图大大滴好!!!</p>
                </div>
                <a th:href="@{'/wallpaper/selectwallpaperVo?wallpaperId='+${wall.wallpaperId}}">详情...</a>
              </div>
            </div>
          </div>


          <!--页码-->
          <div class="col-md-12">
            <div class="pagination">
              <ul>
                <li th:text="${wallpaperpage.getPageNum()}">1</li>
              </ul>
<!--              th:each="page:*{wallpaperpage.getNavigatepageNums()}"-->
              <ul >
                <li class="page-item">
                  <a class="page-link" aria-label="Previous"
                     th:if = "${wallpaperpage.isHasPreviousPage()}"
                     th:href="@{'/wallpaper/wallpaperpageByTG?setPageNum='+${wallpaperpage.getPrePage()}}">
                    <span aria-hidden="true">&laquo;</span>
                  </a>
                </li>
                <li th:each="page:*{wallpaperpage.getNavigatepageNums()}"><a style="display:inline"
                        th:href="@{'/wallpaper/wallpaperpageByTG?setPageNum='+${page}}"
                        th:text="*{page}">1</a>
                </li>
                <li class="page-item">
                  <a class="page-link" aria-label="Next"
                     th:if = "${wallpaperpage.isHasNextPage()}"
                     th:href="@{'/wallpaper/wallpaperpageByTG?setPageNum='+${wallpaperpage.getNextPage()}}">
                    <span aria-hidden="true">&raquo;</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
      </div>
    </div>

    <!-- / content -->




    <!-- JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/static/js/vendor/jquery.min.js"></script>
    <script src="/static/js/vendor/moment.js"></script>
    <script src="/static/js/vendor/bootstrap.min.js"></script>
    <script src="/static/js/vendor/bootstrap-slider.min.js"></script>
    <script src="/static/js/vendor/bootstrap-datetimepicker.min.js"></script>
    <script src="/static/js/vendor/owl.carousel.min.js"></script>
    <script src="/static/js/vendor/navigation.js"></script>
    <script src="/static/js/vendor/modernizr.js"></script>
    <script src="/static/js/vendor/jqueryvalidation.js"></script>
    <script src="/static/js/vendor/jquery.viewbox.min.js"></script>
    <script src="/static/js/vendor/masonry.min.js"></script>
    <script src="/static/js/vendor/imagesloaded.js"></script>
    <script src="/static/js/vendor/jquery.waypoints.min.js"></script>
    <script src="/static/js/vendor/jquery.sticky-kit.min.js"></script>
 
    <script src="/static/js/main.js"></script>
  </body>
  <script src="/static/bootstrap-4.6.1-dist/js/bootstrap.bundle.min.js"></script>
  <script>
    $('#sign-in').click(function (){
      // console.log("按钮测试");
      //跳转到登录页面
      $(window).attr('location',"/pages/signin.html");
    })
  </script>

  <script>
    $(document).ready(function (){
      $.ajax({
        url:'/user/checklogin',
        type:'post',
        headers:{
          Accept:"application/json",
          "Content-Type":"application/json"
        },
        processData:false,
        cache:false
      }).done(function (data) {
        if (data.code===30001){
          $('.adminzx').css("display","block");
          $('#sign-in').css("display","none");
          $(".grzx").css("display","none");
        }else if(data.code===20000){
          $('.adminzx').css("display","none");
          $('#sign-in').css("display","none");
          $(".grzx").css("display","block");
        }else{
          $('.adminzx').css("display","none");
          $('#sign-in').css("display","block");
          $(".grzx").css("display","none");
        }
      });
    })
  </script>
  <script>
    $('#sign-in').click(function (){
      // console.log("按钮测试");
      //跳转到登录页面
      $(window).attr('location',"/pages/signin.html");
    })
    $('#upload').click(function (){
      $(window).attr('location',"/pages/upload.html");
    })
    $('.signout').click(function (){
      $(window).attr('location',"/user/loginout");
    })
    $('#admin').click(function (){
      $(window).attr('location',"/wallpaper/main");
    })
  </script>
</html>
